<!-- 联系客服 -->
<template>
	<d2-container>
		<div slot="header" style="display:flex; justify-content: space-between;">
			<div>联系客服</div>
		</div>
		<div>
			<el-form label-width="80px">
				<el-form-item label="图片">
					<el-upload
						action="api/managea/Tphoto"
						list-type="picture-card"
						:on-remove="handleRemove"
						:on-error="handlError"
						:on-exceed="handlExceed"
						:on-success="handlSuccess"
						:before-upload="beforeAvatarUpload"
						:file-list="fileList"
						:limit="1"
					>
						<i class="el-icon-plus"></i>
					</el-upload>
					<div style="color: red;">建议图片尺寸750*490像素</div>
				</el-form-item>
			</el-form>
		</div>
		<template slot="footer">
			<div>
				<el-button @click="onSubmit" type="primary">确定</el-button>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import {getContactInfo,postContactUpdate} from '@/api/api'
	export default{
		data(){
			return{
				fileList: [], //主图
				baseUrl:process.env.VUE_APP_URL,
				form:{
					id:-1,
					image:''
				}
			}
		},
		mounted(){
			this.getContact()
		},
		methods:{
			//页面加载
			getContact(){
				
				getContactInfo().then(res=>{
					if(res.state==0){
						this.form.id=res.data.id;
						if(res.data.image!=''&&res.data.image!=undefined){
							let str={
								url:this.baseUrl+res.data.image
							}
							this.fileList.push(str)
							this.form.image=res.data.image
						}
					}else{
						this.$message.error(res.msg)
					}
				})
			},
			//提交
			onSubmit(){
				postContactUpdate(this.form).then(res=>{
					if(res.state==0){
						this.fileList=[]
						this.$message.success("提交成功!");
						this.getContact()
					}else{
						this.$message.error(res.msg)
					}
				})
			},
			// 联系客服图片上传
			handlSuccess(response, file, fileList) {
				this.fileList = fileList;
				this.form.image=response.data[1];
			},
			handleRemove(file, fileList) {
				this.fileList = fileList;
				this.form.image=''
			},
			handlError(err, file, fileList) {
				console.log(err, file, fileList);
				this.$message.error('图片上传失败！');
			},
			handlExceed(files, fileList) {
				if (fileList.length >= 1) {
					this.$message.error('只能上传一张图片');
				}
			},
			//图片上传 限制大小
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 2MB!');
				}
			}
		}
	}
</script>

<style>
</style>
